<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
<!-- qtquick-app-tutorial.qdoc -->
  <title>Creating a Qt Quick Application | Qt Creator Manual</title>
  <link rel="stylesheet" type="text/css" href="style/offline-simple.css" />
  <script type="text/javascript">
    document.getElementsByTagName("link").item(0).setAttribute("href", "style/offline.css");
    // loading style sheet breaks anchors that were jumped to before
    // so force jumping to anchor again
    setTimeout(function() {
        var anchor = location.hash;
        // need to jump to different anchor first (e.g. none)
        location.hash = "#";
        setTimeout(function() {
            location.hash = anchor;
        }, 0);
    }, 0);
  </script>
</head>
<body>
<div class="header" id="qtdocheader">
  <div class="main">
    <div class="main-rounded">
      <div class="navigationbar">
        <table><tr>
<td ><a href="index.html">Qt Creator Manual</a></td><td >Creating a Qt Quick Application</td></tr></table><table class="buildversion"><tr>
<td id="buildversion" width="100%" align="right"><a href="index.html">Qt Creator Manual 4.11.1</a></td>
        </tr></table>
      </div>
    </div>
<div class="content">
<div class="line">
<div class="content mainContent">
  <link rel="prev" href="creator-tutorials.html" />
  <link rel="next" href="creator-writing-program.html" />
<p class="naviNextPrevious headerNavi">
<a class="prevPage" href="creator-tutorials.html">Tutorials</a>
<span class="naviSeparator">  &#9702;  </span>
<a class="nextPage" href="creator-writing-program.html">Creating a Qt Widget Based Application</a>
</p><p/>
<div class="sidebar">
<div class="toc">
<h3><a name="toc">Contents</a></h3>
<ul>
<li class="level1"><a href="#creating-the-project">Creating the Project</a></li>
<li class="level1"><a href="#creating-the-main-view">Creating the Main View</a></li>
<li class="level1"><a href="#adding-application-logic">Adding Application Logic</a></li>
<li class="level1"><a href="#adding-animation-to-the-view">Adding Animation to the View</a></li>
</ul>
</div>
<div class="sidebar-content" id="sidebar-content"></div></div>
<h1 class="title">Creating a Qt Quick Application</h1>
<span class="subtitle"></span>
<!-- $$$transitions-description -->
<div class="descr"> <a name="details"></a>
<p>This tutorial uses built-in QML types and illustrates basic concepts of <a href="http://doc.qt.io/qt-5/qtquick-index.html">Qt Quick</a>. For more information about the UI choices you have, see <a href="http://doc.qt.io/qt-5/topics-ui.html">User Interfaces</a>.</p>
<p>This tutorial describes how to use Qt Creator to implement Qt Quick states and transitions. We create an application that displays a Qt logo that moves between three rectangles on the page when you click them.</p>
<p class="centerAlign"><img src="images/qmldesigner-tutorial.png" alt="&quot;States and transitions example&quot;" /></p><p>For more information about developing Qt Quick applications in the Design mode, see <a href="creator-visual-editor.html">Developing Qt Quick Applications</a>.</p>
<p>For examples of using Qt Quick Controls, see <a href="http://doc.qt.io/qt-5/qtquickcontrols2-examples.html">Qt Quick Controls Examples</a>.</p>
<a name="creating-the-project"></a>
<h4 id="creating-the-project">Creating the Project</h4>
<ol class="1" type="1"><li>Select <b>File</b> &gt; <b>New File or Project</b> &gt; <b>Application</b> &gt; <b>Qt Quick Application - Swipe</b> &gt; <b>Choose</b>.</li>
<li>In the <b>Name</b> field, enter a name for the application.</li>
<li>In the <b>Create in</b> field, enter the path for the project files, and then select <b>Next</b> (or <b>Continue</b> on <a href="nolink">macOS</a>).</li>
<li>In the <b>Build system</b> field, select the build system to use for building and running the project: <a href="http://doc.qt.io/qt-5/qmake-manual.html">qmake</a>, <a href="creator-project-cmake.html">CMake</a>, or <a href="creator-project-qbs.html">Qbs</a>.</li>
<li>In the <b>Qt Quick Controls Style</b> field, select one of the predefined <a href="http://doc.qt.io/qt-5/qtquickcontrols2-styles.html">UI styles</a> to use, and then select <b>Next</b>.</li>
<li>Select <a href="creator-glossary.html#glossary-buildandrun-kit">kits</a> for the platforms that you want to build the application for. To build applications for mobile devices, select kits for Android ARM and iPhone OS, and click <b>Next</b>.<p><b>Note: </b>Kits are listed if they have been specified in <b>Tools</b> &gt; <b>Options</b> &gt; <b>Kits</b> (on Windows and Linux) or in <b>Qt Creator</b> &gt; <b>Preferences</b> &gt; <b>Kits</b> (on <a href="nolink">macOS</a>).</p></li>
<li>Select <b>Next</b>.</li>
<li>Review the project settings, and click <b>Finish</b> (or <b>Done</b> on <a href="nolink">macOS</a>).</li>
</ol>
<p>Qt Creator generates two UI files, <i>Page1Form.ui.qml</i> and <i>Page2Form.ui.qml</i>, and a QML file, <i>main.qml</i>. You can modify <i>Page1Form.ui.qml</i> in the <b>Form Editor</b> to create the application main view and <i>main.qml</i> in the <b>Text Editor</b> to add the application logic. For the purposes of this example, you can ignore <i>Page2Form.ui.qml</i>.</p>
<a name="creating-the-main-view"></a>
<h4 id="creating-the-main-view">Creating the Main View</h4>
<p>The main view of the application displays a Qt logo in the top left corner of the view and two empty rectangles.</p>
<p>To use the <i>qt-logo.png</i> image in your application, you must copy it from the Qt examples directory to the project directory (same subdirectory as the QML file). The image appears in <b>Resources</b>. You can also use any other image or a QML type, instead.</p>
<ol class="1" type="1"><li>In the <b>Projects</b> view, double-click the <i>Page1Form.ui.qml</i> file to open it in the Design mode.<p class="centerAlign"><img src="images/qmldesigner-tutorial-design-mode.png" alt="&quot;Transitions project in Design Mode&quot;" /></p></li>
<li>In the <b>Navigator</b>, select <b>Label</b> and press <b>Delete</b> to delete it.</li>
<li>Select <b>Page</b> in the navigator, and enter <i>page</i> in the <b>Id</b> field.</li>
<li>In <b>Library</b> &gt; <b>Resources</b>, select qt-logo.png and drag and drop it to the <i>page</i> in the navigator.<p class="centerAlign"><img src="images/qmldesigner-tutorial-user-icon.png" alt="&quot;Image properties&quot;" /></p><ol class="a" type="a"><li>In the <b>Id</b> field, enter <i>icon</i>.</li>
<li>In the <b>Position</b> field, set <b>X</b> to <i>10</i> and <b>Y</b> to <i>20</i>.</li>
</ol>
</li>
<li>Right-click the resource file, qml.qrc, in the <b>Projects</b> view, and select <b>Add Existing File</b> to add qt-logo.png to the resource file for deployment.</li>
<li>Drag and drop a <b>Rectangle</b> to <i>page</i> in the navigator and edit its properties.<p class="centerAlign"><img src="images/qmldesigner-tutorial-topleftrect.png" alt="&quot;Rectangle properties&quot;" /></p><ol class="a" type="a"><li>In the <b>Id</b> field, enter <i>topLeftRect</i>.</li>
<li>In the <b>Size</b> field, set <b>W</b> to <i>55</i> and <b>H</b> to <i>41</i>, for the rectangle size to match the image size.</li>
<li>In the <b>Color</b> field, click the <img src="images/icon_color_none.png" alt="" /> (<b>Transparent</b>) button to make the rectangle transparent.</li>
<li>In the <b>Border color</b> field, set the border color to <i>#808080</i>.</li>
<li>Click <b>Layout</b>, and then click the <img src="images/anchor-top.png" alt="" /> (<b>Top</b>) and <img src="images/anchor-left.png" alt="" /> (<b>Left</b>) anchor buttons to anchor the rectangle to the top left corner of the page.</li>
<li>In the <b>Margin</b> field, select <i>20</i> for the top anchor and <i>10</i> for the left anchor.<p class="centerAlign"><img src="images/qmldesigner-tutorial-topleftrect-layout.png" alt="&quot;Anchor margins&quot;" /></p></li>
</ol>
</li>
<li>Drag and drop a <b>Mouse Area</b> type from the <b>Library</b> to <i>topLeftRect</i> in the navigator.</li>
<li>Click <b>Layout</b>, and then click the <img src="images/anchor-fill.png" alt="" /> (<b>Fill to Parent</b>) button to anchor the mouse area to the rectangle.</li>
<li>In the <b>Navigator</b>, copy topLeftRect (by pressing <b>Ctrl+C</b>) and paste it to the <i>page</i> in the navigator twice (by pressing <b>Ctrl+V</b>). Qt Creator renames the new instances of the type topLeftRect1 and topLeftRect2.</li>
<li>Select topLeftRect1 and edit its properties:<ol class="a" type="a"><li>In the <b>Id</b> field, enter <i>middleRightRect</i>.</li>
<li>In <b>Layout</b>, select the <img src="images/anchor-vertical-center.png" alt="" /> (<b>Vertical Center</b> anchor button and then the <img src="images/anchor-right.png" alt="" /> (<b>Right</b>) anchor button to anchor the rectangle to the middle right margin of its parent.</li>
<li>In the <b>Margin</b> field, select <i>10</i> for the right anchor and <i>0</i> for the vertical center anchor.</li>
</ol>
</li>
<li>Select topLeftRect2 and edit its properties:<ol class="a" type="a"><li>In the <b>Id</b> field, enter <i>bottomLeftRect</i>.</li>
<li>In <b>Layout</b>, select the <img src="images/anchor-bottom.png" alt="" /> (<b>Bottom</b>) and <img src="images/anchor-left.png" alt="" /> (<b>Left</b>) anchor buttons to anchor the rectangle to the bottom left margin of its parent.</li>
<li>In the <b>Margin</b> field, select <i>20</i> for the bottom anchor and <i>10</i> for the left anchor.</li>
</ol>
</li>
<li>In the <b>Navigator</b>, select the <img src="images/export_unchecked.png" alt="" /> (<b>Export</b>) button for each type to export all types as properties. This enables you to use the properties in the <i>main.qml</i> file.</li>
<li>Press <b>Ctrl+S</b> to save the changes.</li>
</ol>
<p>To check your code, you can view your <i>Page1Form.ui.qml</i> file in the <b>Text Editor</b> and compare it with the <i>Page1Form.ui.qml</i> example file.</p>
<p>The new project wizard adds boilerplate code to the <i>Page1.qml</i> file to create menu items and push buttons. Modify the boilerplate code by removing obsolete code. You removed the push buttons from the UI form, so you also need to remove the corresponding code from <i>Page1.qml</i> (or the application cannot be built).</p>
<p>The UI is now ready and you can switch to editing the <i>main.qml</i> file in the <b>Text Editor</b> to add animation to the application, as described in the following section.</p>
<p class="centerAlign"><img src="images/qmldesigner-tutorial-ui-ready.png" alt="&quot;Transitions UI&quot;" /></p><a name="adding-application-logic"></a>
<h4 id="adding-application-logic">Adding Application Logic</h4>
<p>Edit the <i>main.qml</i> file to add pointers to two additional states: <i>State1</i> and <i>State2</i>. You cannot use the <b>Form Editor</b> to add states for a Window QML type. Use the <b>Text Editor</b> to add the states inside a <a href="http://doc.qt.io/qt-5/qml-qtquick-stategroup.html">StateGroup</a> QML type and refer to them by using the id of the state group.</p>
<ol class="1" type="1"><li>Specify the window size and background color as properties of the <a href="http://doc.qt.io/qt-5/qml-qtquick-controls2-applicationwindow.html">ApplicationWindow</a> type:<pre class="cpp">

  <span class="type"><a href="http://doc.qt.io/qt-5/qml-qtquick-controls2-applicationwindow.html">ApplicationWindow</a></span> {
      <span class="name">visible</span>: <span class="number">true</span>
      <span class="name">width</span>: <span class="number">640</span>
      <span class="name">height</span>: <span class="number">480</span>
      <span class="name">title</span>: <span class="name">qsTr</span>(<span class="string">&quot;Tabs&quot;</span>)

</pre>
</li>
<li>Specify an id for the Page1 type to be able to use the properties that you exported in <i>Page1Form.ui.qml</i>:<pre class="cpp">

      <span class="type"><a href="http://doc.qt.io/qt-5/qml-qtquick-controls2-swipeview.html">SwipeView</a></span> {
          <span class="name">id</span>: <span class="name">swipeView</span>
          <span class="name">anchors</span>.fill: <span class="name">parent</span>
          <span class="name">currentIndex</span>: <span class="name">tabBar</span>.<span class="name">currentIndex</span>

          <span class="type">Page1Form</span> {
              <span class="name">id</span>: <span class="name">page</span>

</pre>
</li>
<li>Add a pointer to the clicked expressions in <b>mouseArea</b>:<pre class="cpp">

              <span class="type">mouseArea</span> {
              <span class="name">onClicked</span>: <span class="name">stateGroup</span>.<span class="name">state</span> <span class="operator">=</span> <span class="string">' '</span>
              }

</pre>
<p>The expression sets the state to the base state and returns the image to its initial position.</p>
</li>
<li>Add a pointer to a clicked expression to <b>mouseArea1</b> to set the state to <i>State1</i>:<pre class="cpp">

              <span class="type">mouseArea1</span> {
              <span class="name">onClicked</span>: <span class="name">stateGroup</span>.<span class="name">state</span> <span class="operator">=</span> <span class="string">'State1'</span>
              }

</pre>
</li>
<li>Add a pointer to a clicked expression to <b>mouseArea2</b> to set the state to <i>State2</i>:<pre class="cpp">

              <span class="type">mouseArea2</span> {
              <span class="name">onClicked</span>: <span class="name">stateGroup</span>.<span class="name">state</span> <span class="operator">=</span> <span class="string">'State2'</span>
              }
          }

</pre>
</li>
<li>Bind the position of the Qt logo to the rectangle to make sure that the logo is displayed within the rectangle when the view is scaled on different sizes of screens. Set expressions for the x and y properties, as illustrated by the following code snippet:<pre class="cpp">

      <span class="type"><a href="http://doc.qt.io/qt-5/qml-qtquick-stategroup.html">StateGroup</a></span> {
          <span class="name">id</span>: <span class="name">stateGroup</span>
          <span class="name">states</span>: [
              <span class="type"><a href="http://doc.qt.io/qt-5/qml-qtqml-statemachine-state.html">State</a></span> {
                  <span class="name">name</span>: <span class="string">&quot;State1&quot;</span>

                  <span class="type"><a href="http://doc.qt.io/qt-5/qml-qtquick-propertychanges.html">PropertyChanges</a></span> {
                      <span class="name">target</span>: <span class="name">page</span>.<span class="name">icon</span>
                      <span class="name">x</span>: <span class="name">page</span>.<span class="name">middleRightRect</span>.<span class="name">x</span>
                      <span class="name">y</span>: <span class="name">page</span>.<span class="name">middleRightRect</span>.<span class="name">y</span>
                  }
              },
              <span class="type"><a href="http://doc.qt.io/qt-5/qml-qtqml-statemachine-state.html">State</a></span> {
                  <span class="name">name</span>: <span class="string">&quot;State2&quot;</span>

                  <span class="type"><a href="http://doc.qt.io/qt-5/qml-qtquick-propertychanges.html">PropertyChanges</a></span> {
                      <span class="name">target</span>: <span class="name">page</span>.<span class="name">icon</span>
                      <span class="name">x</span>: <span class="name">page</span>.<span class="name">bottomLeftRect</span>.<span class="name">x</span>
                      <span class="name">y</span>: <span class="name">page</span>.<span class="name">bottomLeftRect</span>.<span class="name">y</span>
                  }
              }
          ]

</pre>
</li>
<li>Press <b>Ctrl+R</b> to run the application.</li>
</ol>
<p>Click the rectangles to move the Qt logo from one rectangle to another.</p>
<a name="adding-animation-to-the-view"></a>
<h4 id="adding-animation-to-the-view">Adding Animation to the View</h4>
<p>Add transitions inside the state group to define how the properties change when the Qt logo moves between states. The transitions apply animations to the Qt logo. For example, the Qt logo bounces back when it moves to the middleRightRect and eases into bottomLeftRect.</p>
<ol class="1" type="1"><li>In the <b>Text Editor</b>, add the following code to specify that when moving to State1, the x and y coordinates of the Qt logo change linearly over a duration of 1 second:<pre class="cpp">

          <span class="name">transitions</span>: [
              <span class="type"><a href="http://doc.qt.io/qt-5/qml-qtquick-transition.html">Transition</a></span> {
                  <span class="name">from</span>: <span class="string">&quot;*&quot;</span>; <span class="name">to</span>: <span class="string">&quot;State1&quot;</span>
                  <span class="type"><a href="http://doc.qt.io/qt-5/qml-qtquick-numberanimation.html">NumberAnimation</a></span> {
                      <span class="name">easing</span>.type: <span class="name">Easing</span>.<span class="name">OutBounce</span>
                      <span class="name">properties</span>: <span class="string">&quot;x,y&quot;</span>;
                      <span class="name">duration</span>: <span class="number">1000</span>
                  }
              },

</pre>
</li>
<li>You can use the Qt Quick toolbar for animation to change the easing curve type from linear to OutBounce:<ol class="a" type="a"><li>Click <b>NumberAnimation</b> in the <b>Text Editor</b> to display the <img src="images/refactormarker.png" alt="" /> icon, and then click the icon to open the toolbar:<p class="centerAlign"><img src="images/qmldesigner-tutorial-quick-toolbar.png" alt="&quot;Qt Quick toolbar for animation&quot;" /></p></li>
<li>In the <b>Easing</b> field, select <b>Bounce</b>.</li>
<li>In the <b>Subtype</b> field, select <b>Out</b>.</li>
</ol>
</li>
<li>Add the following code to specify that when moving to State2, the x and y coordinates of the Qt logo change over a duration of 2 seconds, and an InOutQuad easing function is used:<pre class="cpp">

      ...
              <span class="type"><a href="http://doc.qt.io/qt-5/qml-qtquick-transition.html">Transition</a></span> {
                  <span class="name">from</span>: <span class="string">&quot;*&quot;</span>; <span class="name">to</span>: <span class="string">&quot;State2&quot;</span>
                  <span class="type"><a href="http://doc.qt.io/qt-5/qml-qtquick-numberanimation.html">NumberAnimation</a></span> {
                          <span class="name">properties</span>: <span class="string">&quot;x,y&quot;</span>;
                          <span class="name">easing</span>.type: <span class="name">Easing</span>.<span class="name">InOutQuad</span>;
                          <span class="name">duration</span>: <span class="number">2000</span>
                  }
              },

</pre>
</li>
<li>Add the following code to specify that for any other state changes, the x and y coordinates of the Qt logo change linearly over a duration of 200 milliseconds:<pre class="cpp">

      ...
              <span class="type"><a href="http://doc.qt.io/qt-5/qml-qtquick-transition.html">Transition</a></span> {
                       <span class="type"><a href="http://doc.qt.io/qt-5/qml-qtquick-numberanimation.html">NumberAnimation</a></span> {
                           <span class="name">properties</span>: <span class="string">&quot;x,y&quot;</span>;
                           <span class="name">duration</span>: <span class="number">200</span>
                       }
              }
          ]

</pre>
</li>
<li>Press <b>Ctrl+R</b> to run the application.</li>
</ol>
<p>Click the rectangles to view the animated transitions.</p>
<p>Files:</p>
<ul>
<li><a href="qt-creator-transitions-page1form-ui-qml.html">transitions/Page1Form.ui.qml</a></li>
<li><a href="qt-creator-transitions-page2form-ui-qml.html">transitions/Page2Form.ui.qml</a></li>
<li><a href="qt-creator-transitions-main-qml.html">transitions/main.qml</a></li>
<li><a href="qt-creator-transitions-qml-qrc.html">transitions/qml.qrc</a></li>
<li><a href="qt-creator-transitions-transitions-pro.html">transitions/transitions.pro</a></li>
</ul>
<p>Images:</p>
<ul>
<li><a href="images/used-in-examples/transitions/qt-logo.png">transitions/qt-logo.png</a></li>
</ul>
</div>
<!-- @@@transitions -->
<p class="naviNextPrevious footerNavi">
<a class="prevPage" href="creator-tutorials.html">Tutorials</a>
<span class="naviSeparator">  &#9702;  </span>
<a class="nextPage" href="creator-writing-program.html">Creating a Qt Widget Based Application</a>
</p>
        </div>
       </div>
   </div>
   </div>
</div>
<div class="footer">
   <p>
   <acronym title="Copyright">&copy;</acronym> 2019 The Qt Company Ltd.
   Documentation contributions included herein are the copyrights of
   their respective owners.<br>    The documentation provided herein is licensed under the terms of the    <a href="http://www.gnu.org/licenses/fdl.html">GNU Free Documentation    License version 1.3</a> as published by the Free Software Foundation.<br>    Qt and respective logos are trademarks of The Qt Company Ltd.     in Finland and/or other countries worldwide. All other trademarks are property
   of their respective owners. </p>
</div>
</body>
</html>
